<!-- 合同文本 -->
<template>
  <div class="wrap">
    <section class="">
      <RichTextNew v-model:content="formData.text" ref="rich"></RichTextNew>
    </section>
    <section class="control">
      <a-scrollbar style="height: calc(100vh - 260px); overflow: auto">
        <a-input-search
          v-model="searchVal"
          search-button
          @input="onSearch"
          @press-enter="onSearch"
          placeholder="快速搜索变量"
        ></a-input-search>
        <section v-for="item in currControlData" :key="item.id">
          <h3>{{ item.subDetail.cnName }}</h3>
          <a-space wrap>
            <a-button
              v-for="(item2, index2) in item.subDetail.subRelDetail"
              :key="item2.id"
              @click="inputLabel(item2, index2)"
              >{{ item2.ctlCnName }}
            </a-button>
          </a-space>
          <a-divider />
        </section>
      </a-scrollbar>
    </section>
  </div>
</template>

<script setup lang="ts">
import { GetBusinessModalData } from '@/apis/controltotal';
import { cloneDeep } from 'lodash';
import { changeControlData } from '@/utils/control';

const props = withDefaults(
  defineProps<{
    data: any;
  }>(),
  {}
);
const emit = defineEmits(['update:visible', 'update:data', 'handleOk', 'save']);

const formData = ref({
  text: '',
  codes: []
});

watch(
  () => props.data,
  (newVal: any) => {
    formData.value = cloneDeep(newVal);
    console.log('====================================codes');
    console.log(formData.value);
    console.log('====================================');
    // if (typeof newVal.codes === 'string')
    //   formData.value.codes = newVal.codes.split(',');
  },
  {
    immediate: true,
    deep: true
  }
);

let originControlData = ref([]), // 储存原始控件信息
  currControlData = ref<any>([]), // 储存当前控件信息
  searchVal = ref('');
const getData = async () => {
  const { funcCtlInfos } = (await GetBusinessModalData({
    funcCode: 'SER_FUNC751D0BFF5DF442209D437EE9A581693E'
  })) as any;
  controlList.value = changeControlData(funcCtlInfos, 'ctlDetail');
  originControlData.value = funcCtlInfos.children;
  currControlData.value = cloneDeep(funcCtlInfos.children);
};
getData();

let rich = ref(); // 富文本ref
let codes: any = []; // 储存当前选择的控件
// tab选项初始数据
let controlList: any = ref();

// 搜索框
const onSearch = () => {
  currControlData.value = [];
  if (searchVal.value === '') {
    currControlData.value = cloneDeep(originControlData.value);
  } else {
    for (let item of originControlData.value) {
      item.subDetail.subRelDetail.forEach((item2: any) => {
        if (item2.ctlCnName.includes(searchVal.value)) {
          // 判断如果该控件所属的子集不存在，则创建一个子集，否则直接将控件信息赋值给subRelDetail
          if (
            currControlData.value[currControlData.value.length - 1]?.id !==
            item.id
          ) {
            currControlData.value.push({
              id: item.id,
              subDetail: {
                cnName: item.subDetail.cnName,
                subRelDetail: []
              }
            });
          }
          currControlData.value[
            currControlData.value.length - 1
          ].subDetail.subRelDetail.push(item2);
        }
      });
    }
  }
};

// 新增tab
const inputLabel = (item: any, ind: number) => {
  const arr = formData.value.codes;
  if (arr?.length !== 0) {
    if (!arr?.some((ele: any) => ele === controlList.value[ind].ctlCode)) {
      arr?.push(controlList.value[ind].ctlCode);
    }
  } else {
    arr?.push(controlList.value[ind].ctlCode);
  }

  const tag = `&nbsp;<span style="text-decoration: underline; color: #3598db; font-size: 12pt;">#${item.ctlCnName}#</span>&nbsp;`;
  nextTick(() => {
    rich.value.insertContent(tag);
  });
};
defineExpose({ formData });
</script>

<style lang="less" scoped>
.wrap {
  width: 100%;
  display: grid;
  grid-template-columns: 3fr 1fr;

  .control {
    max-width: 300px;
    padding: 10px 20px 0px;

    section {
      h3 {
        font-weight: 700;
        height: 56px;
        line-height: 56px;
        &::before {
          content: '';
          display: inline-block;
          width: 6px;
          height: 40%;
          margin-right: 10px;
          background: #165dff;
          position: relative;
          top: 7px;
          border-radius: 3px;
        }
      }
    }
  }
}
</style>
